<template>
  <div>
    <div class="sidebar">
    <el-row class="tac">
  <el-col>
    <el-menu
      default-active="1"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose">
      <el-menu-item index="1">
        <template slot="title">
          <i class="el-icon-edit-outline"></i>
          <span>企业信息管理</span>
        </template>
      </el-menu-item>
      <el-menu-item index="2">
        <i class="el-icon-user-solid"></i>
        <span slot="title">高管信息管理</span>
      </el-menu-item>
    </el-menu>
  </el-col>
</el-row>
</div>
    <div class="companymessage">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input
          v-model="search"
          class="search_name"
          size="mini"
          placeholder="输入姓名查询"
        >
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="text" @click="onSearch()" class="el-icon-search"
          >查询
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button class="el-icon-refresh" type="text" @click="refreshData"
          >刷新
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          class="el-icon-circle-plus-outline"
          type="text"
          @click="dialogVisible = true"
          >添加
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      highlight-current-row
      border
      style="width: 100%"
    >
      <el-table-column label="编号">
        <template slot-scope="scope">
          <span>{{ scope.row.cid }}</span>
        </template>
      </el-table-column>
      <el-table-column label="名称">
        <template slot-scope="scope">
          <i class=""></i>
          <span>{{ scope.row.comName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="证件类型">
        <template slot-scope="scope">
          <i class=""></i>
          <span>{{ scope.row.paperType }}</span>
        </template>
      </el-table-column>
      <el-table-column label="证件号码">
        <template slot-scope="scope">
          <i class=""></i>
          <span>{{ scope.row.paperNo }}</span>
        </template>
      </el-table-column>
     <el-table-column label="成立日期">
        <template slot-scope="scope">
          <i class=""></i>
          <span>{{ scope.row.setDate }}</span>
        </template>
      </el-table-column>
           <el-table-column label="注册资本">
        <template slot-scope="scope">
          <i class=""></i>
          <span>{{ scope.row.regCapital}}</span>
        </template>
      </el-table-column>
           <el-table-column label="地址">
        <template slot-scope="scope">
          <i class=""></i>
          <span>{{ scope.row.address }}</span>
        </template>
      </el-table-column>
           <el-table-column label="职工人数">
        <template slot-scope="scope">
          <i class=""></i>
          <span>{{ scope.row.workerNum }}</span>
        </template>
      </el-table-column>
      <!--       <el-table-column
          label="姓名">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="right">
              <p>姓名: {{ scope.row.userName }}</p>
              <p>住址: {{ scope.row.userAddress }}</p>
              <p>日期：{{ scope.row.userDate }}</p>
              <div slot="reference" class="name-wrapper">
                <el-button type="text">{{ scope.row.userName }}</el-button>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          label="住址">
          <template slot-scope="scope">
            <span>{{ scope.row.userAddress }}</span>
          </template>
        </el-table-column> -->
      <el-table-column label="操作" fixed="right" width="200">
        <template slot-scope="scope">
          <el-button
            size="mini"
            icon="el-icon-edit"
            @click="handleEdit(scope.$index, scope.row)"
            >编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            @click="handleDelete(scope.$index, scope.row)"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="70px"
      class="demo-ruleForm"
      size="medium"
    >
      <el-dialog
        title="编辑"
        :append-to-body="true"
        :visible.sync="dialogVisible"
        width="80%"
        :before-close="handleClose"
      >
        <el-input type="hidden" v-model="ruleForm.userId" />
        <el-form-item label="时间" prop="userDate">
          <el-date-picker
            type="datetime"
            placeholder="选择日期"
            v-model="ruleForm.userDate"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="姓名" prop="userName">
          <el-input v-model="ruleForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="住址" prop="userAddress">
          <el-input v-model="ruleForm.userAddress"></el-input>
        </el-form-item>

        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel()" size="medium">取 消</el-button>
          <el-button @click="addUser()" type="primary" size="medium"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </el-form>

    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="70px"
      class="demo-ruleForm"
      size="medium"
    >
      <el-dialog
        title="编辑"
        :append-to-body="true"
        :visible.sync="dialogUpdate"
        width="80%"
        :before-close="handleClose"
      >
        <el-input type="hidden" v-model="ruleForm.userId" />
        <el-form-item label="时间" prop="userDate">
          <el-date-picker
            type="datetime"
            placeholder="选择日期"
            v-model="ruleForm.userDate"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="姓名" prop="userName">
          <el-input v-model="ruleForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="住址" prop="userAddress">
          <el-input v-model="ruleForm.userAddress"></el-input>
        </el-form-item>

        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel()" size="medium">取 消</el-button>
          <el-button @click="updateUser()" type="primary" size="medium"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </el-form>
    <br />
    <div class="pages">
      <el-pagination
        background
        :disabled="disablePage"
        :current-page.sync="currentPage"
        small
        layout="prev, pager, next"
        :page-size="pageSize"
        :total="total"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        userId: "",
        userName: "",
        userDate: "",
        userAddress: "",
      },
      rules: {
        userName: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 7, message: "长度在 2 到 7 个字符", trigger: "blur" },
        ],
        userAddress: [
          { required: true, message: "请输入住址", trigger: "blur" },
          { min: 5, message: "长度大于 5 个字符", trigger: "blur" },
        ],
      },
      tableData: [],
      search: "",
      dialogVisible: false,
      dialogUpdate: false,
      pageSize: 5,
      currentPage: 1,
      total: 0,
      disablePage: false,
    };
  },
  methods: {
     handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
    handleEdit(index, row) {
      this.dialogUpdate = true;
      this.ruleForm = Object.assign({}, row); //这句是关键！！！
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm("删除操作, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let postData = this.qs.stringify({
            userId: row.userId,
          });
          this.axios({
            method: "post",
            url: "/delete",
            data: postData,
          })
            .then((response) => {
              this.getPages();
              this.currentPage = 1;
              this.axios
                .post("/page")
                .then((response) => {
                  this.tableData = response.data;
                })
                .catch((error) => {
                  console.log(error);
                });
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              console.log(response);
            })
            .catch((error) => {
              console.log(error);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    handleCurrentChange() {
      console.log(`当前页: ${this.currentPage}`);
      let postData = this.qs.stringify({
        page: this.currentPage,
      });
      this.axios
        .post(`/company/searchPageList/${pageNum}/${pageSize}`)
        .then((response) => {
          this.tableData = response.data.pageDate;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    cancel() {
      this.dialogUpdate = false;
      this.dialogVisible = false;
      this.emptyUserData();
    },
    emptyUserData() {
      this.ruleForm = {
        userName: "",
        userDate: "",
        userAddress: "",
      };
    },
    addUser() {
      let postData = this.qs.stringify({
        userDate: this.ruleForm.userDate,
        userName: this.ruleForm.userName,
        userAddress: this.ruleForm.userAddress,
      });
      this.axios({
        method: "post",
        url: "/insert",
        data: postData,
      })
        .then((response) => {
          this.axios
            .post("/page")
            .then((response) => {
              this.tableData = response.data;
              this.currentPage = 1;
              this.$message({
                type: "success",
                message: "已添加!",
              });
            })
            .catch((error) => {
              console.log(error);
            });
          this.getPages();
          this.dialogVisible = false;
          console.log(response);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    updateUser() {
      let postData = this.qs.stringify({
        userId: this.ruleForm.userId,
        userDate: this.ruleForm.userDate,
        userName: this.ruleForm.userName,
        userAddress: this.ruleForm.userAddress,
      });
      this.axios({
        method: "post",
        url: "/update",
        data: postData,
      })
        .then((response) => {
          this.handleCurrentChange();
          this.cancel();
          this.$message({
            type: "success",
            message: "更新成功!",
          });
          console.log(response);
        })
        .catch((error) => {
          this.$message({
            type: "success",
            message: "更新失败!",
          });
          console.log(error);
        });
    },
    onSearch() {
      let postData = this.qs.stringify({
        comName: this.search,
      });
      this.axios({
        method: "post",
        url: "/ListByName",
        data: postData,
      })
        .then((response) => {
          this.tableData = response.data;
          this.disablePage = true;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getPages() {
      this.axios
        .post("/rows")
        .then((response) => {
          this.total = response.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    refreshData() {
      location.reload();
    },
  },
  created() {
    /*this.axios.get('static/user.json').then(response =>
            {
                this.tableData = response.data.tableData;
                this.total = response.data.tableData.length;
                // console.log(JSON.parse(JSON.stringify(response.data))['tableData'])
            });*/
    this.axios
      .post(`/company/searchPageList/${this.currentPage}/${this.pageSize}`)
      .then((response) => {
        this.tableData = response.data.pageDate;
      })
      .catch((error) => {
        console.log(error);
      });

    /*             this.axios.post('/rows').then(response =>
            {
                this.total = response.data;
            }).catch(error =>
            {
                console.log(error);
            }); */
  },
};
</script>
<style scoped>
.search_name {
  width: 200px;
}
.pages {
  margin: 0px;
  padding: 0px;
  text-align: right;
}
.sidebar {
  float: left;
}
.companymessage {
  float: left;
  margin-left: 50px;
}
</style>
